<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/common.css">
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="../editor.md/css/editormd.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../editor.md/lib/marked.min.js"></script>
    <script src="../editor.md/lib/prettify.min.js"></script>
    <script src="../editor.md/editormd.js"></script>
    <style>
        .edit_blog_container {
            height: calc(100vh - 60px);
            width: 100%;
            background-color: rgba(128, 128, 128, 0.418);
        }
        .input_title {
            width: 70%;
            height: 50px;
            border: none;
            border-radius: 5px;
            padding-left: 10px;
            font-size: 20px;
            color: #fb78b9;
            background-color: #ffffffad;
            margin: 20px 0;
            outline: none;
        }       
        .title {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .title button {
            width: 100px;
            height: 50px;
            background-color: rgb(255, 145, 164);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-left: 20px;
            font-size: 20px;
        }
        .title button:hover {
            background-color: #ff69b4;
        }
    </style>
    <!-- <script type="text/javascript">
        
        var testEditor;
            
            $(function() {
                
                $.get('test.md', function(md){
                    testEditor = editormd("test-editormd", {
                        width: "90%",
                        height: 740,
                        path : '../lib/',
                        theme : "dark",
                        previewTheme : "dark",
                        editorTheme : "pastel-on-dark",
                        markdown : md,
                        codeFold : true,
                        //syncScrolling : false,
                        saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
                        searchReplace : true,
                        //watch : false,                // 关闭实时预览
                        htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
                        //toolbar  : false,             //关闭工具栏
                        //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
                        emoji : true,
                        taskList : true,
                        tocm            : true,         // Using [TOCM]
                        tex : true,                   // 开启科学公式TeX语言支持，默认关闭
                        flowChart : true,             // 开启流程图支持，默认关闭
                        sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
                        //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
                        //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
                        //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
                        //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
                        //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
                        imageUpload : true,
                        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
                        imageUploadURL : "./php/upload.php",
                        onload : function() {
                            console.log('onload', this);
                            //this.fullscreen();
                            //this.unwatch();
                            //this.watch().fullscreen();

                            //this.setMarkdown("#PHP");
                            //this.width("100%");
                            //this.height(480);
                            //this.resize("100%", 640);
                        }
                    });
                });
                
                $("#goto-line-btn").bind("click", function(){
                    testEditor.gotoLine(90);
                });
                
                $("#show-btn").bind('click', function(){
                    testEditor.show();
                });
                
                $("#hide-btn").bind('click', function(){
                    testEditor.hide();
                });
                
                $("#get-md-btn").bind('click', function(){
                    alert(testEditor.getMarkdown());
                });
                
                $("#get-html-btn").bind('click', function() {
                    alert(testEditor.getHTML());
                });                
                
                $("#watch-btn").bind('click', function() {
                    testEditor.watch();
                });                 
                
                $("#unwatch-btn").bind('click', function() {
                    testEditor.unwatch();
                });              
                
                $("#preview-btn").bind('click', function() {
                    testEditor.previewing();
                });
                
                $("#fullscreen-btn").bind('click', function() {
                    testEditor.fullscreen();
                });
                
                $("#show-toolbar-btn").bind('click', function() {
                    testEditor.showToolbar();
                });
                
                $("#close-toolbar-btn").bind('click', function() {
                    testEditor.hideToolbar();
                });
                
                $("#toc-menu-btn").click(function(){
                    testEditor.config({
                        tocDropdown   : true,
                        tocTitle      : "目录 Table of Contents",
                    });
                });
                
                $("#toc-default-btn").click(function() {
                    testEditor.config("tocDropdown", false);
                });
            });
        
    </script> -->
</head>
<body>
    <!-- 写博客 -->
    <div class="nav">
        <img src="../img/logo.png" alt="">
        <span>我的博客系统</span>
        <span class="space"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="https://baidu.com">注销</a>
    </div>
    <div class="edit_blog_container">
        <div class="title">
            <input type="text" name="title" placeholder="标题" required class="input_title">
            <button type="submit">发布</button>
        </div>
        <div id="editor">

        </div>
    </div>
</body>
<script>
    // let edit = editormd("editor", {
    //     width: "85%",
    //     height: "90%",
    //     path : "../editor.md/lib/",
    //     theme : "dark",
    //     previewTheme : "dark",
    //     editorTheme : "pastel-on-dark",
    //     markdown : md,
    //     codeFold : true,
    //     //syncScrolling : false,
    //     saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
    //     searchReplace : true,
    //     //watch : false,                // 关闭实时预览
    //     htmlDecode : "style,script,iframe|on*",            // 开启 HTML 标签解析，为了安全性，默认不开启    
    //     //toolbar  : false,             //关闭工具栏
    //     //previewCodeHighlight : false, // 关闭预览 HTML 的代码块高亮，默认开启
    //     emoji : true,
    //     taskList : true,
    //     tocm            : true,         // Using [TOCM]
    //     tex : true,                   // 开启科学公式TeX语言支持，默认关闭
    //     flowChart : true,             // 开启流程图支持，默认关闭
    //     sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
    //     //dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
    //     //dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
    //     //dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
    //     //dialogMaskOpacity : 0.4,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
    //     //dialogMaskBgColor : "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
    //     imageUpload : true,
    //     imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    //     imageUploadURL : "./php/upload.php"
    // });
    let edit = editormd("editor", {
        width: "85%",
        height: "90%",
        path : "../editor.md/lib/",
        saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
        emoji : true,
        taskList : true,
        tex : true, // 开启科学公式TeX语言支持，默认关闭
        flowChart : true, // 开启流程图支持，默认关闭
        sequenceDiagram : true, // 开启时序/序列图支持，默认关闭；需要加载 sequenceDiagram.js 和 dia.js
        // theme : "dark",
        // previewTheme : "dark",
        // editorTheme : "pastel-on-dark",
        tocm            : true,         // Using [TOCM]
        tex : true,                   // 开启科学公式TeX语言支持，默认关闭
        flowChart : true,             // 开启流程图支持，默认关闭
        sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
        dialogLockScreen : false,   // 设置弹出层对话框不锁屏，全局通用，默认为true
        dialogShowMask : false,     // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true
        dialogDraggable : false,    // 设置弹出层对话框不可拖动，全局通用，默认为true
        dialogMaskOpacity : 0.1,    // 设置透明遮罩层的透明度，全局通用，默认值为0.1
        dialogMaskBgColor : "#fff", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff
        imageUpload : true,
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
    });
    let submitBtn = document.querySelector('.title button');
    submitBtn.addEventListener('click', function() {
        let title = document.querySelector('.input_title').value;
        let content = edit.getMarkdown(); // 获取 Markdown 内容
        if (title && content) {
            // 这里可以添加发布逻辑，比如发送请求到服务器保存博客
            console.log("标题:", title);
            console.log("内容:", content);
            alert("发布成功！");
        } else {
            alert("请填写标题和内容！");
        }
    });
</script>
</html>